<template>
  <!-- 替换产品 -->
  <view class="container">
    <u-navbar title="可选适配" :border-bottom="false"></u-navbar>
    
    <!-- 筛选 -->
    <!-- <view class="screen-box">
      <view class="flex flex-ai-c" @click="show = true">
        <text class="text">筛选</text>
        <u-icon size="32" name="list-dot"></u-icon>
      </view>
    </view> -->
    <!-- 筛选条件 -->
    <!-- <view class="condition">
      <view class="condition-list">
        <scroll-view class="scroll-view" scroll-x>
          <view class="condition-item">
            <text>壳牌/Shell</text>
            <text class="iconfont iconguanbi"></text>
          </view>
          <view class="condition-item">
            <text>半合成</text>
            <text class="iconfont iconguanbi"></text>
          </view>
        </scroll-view>
      </view>
      <view class="btn-reset" @click="onClickReset">
        <text class="iconfont iconzhongzhi"></text>
        <text class="text">重置</text>
      </view>
    </view> -->
    
    <!-- 产品列表 -->
    <view class="product-list">
      <view class="cell" v-for="(item, index) in result.data" :key="index">
        <u-image class="img" :src="item.pic_URL || errorImg" width="120" height="120" border-radius="10"></u-image>
        <view class="info">
          <view class="title">
            <text>{{item.goods_Name}}</text>
          </view>
          <!-- <view class="tags">
            <text class="text">全合成</text>
            <text class="text">5W-40</text>
            <text class="text">SP</text>
            <text class="text">4L</text>
          </view> -->
          <view class="bottom-box">
            <view class="left">
              <text class="price">￥<text class="strong">{{item.sale_Price}}</text></text>
              <text class="num">x1</text>
            </view>
            <view class="right" @click="onClickReplace(item)"><text>替换</text></view>
          </view>
        </view>
      </view>
      <view class="flex flex-jc-c u-m-20" v-if="result.loading"><u-loading mode="circle"></u-loading></view>
      <view class="loading-status" v-else><u-loadmore :status="result.status" /></view>
    </view>
    
    <!-- 弹窗 -->
    <u-popup mode="right" v-model="show" :safe-area-inset-bottom="true">
      <view class="popup-content">
        <view class="content">
          <view class="list">
            <scroll-view scroll-y="true" class="scroll-view">
              <view class="classify-box">
                <view class="classify-title"><text>品牌</text></view>
                <view class="classify-list-one">
                  <view class="cell" v-for="(item, index) in 6" :key="index" :class="{active: index === 1}">
                    <image class="logo" src="https://files.yzsheng.com/goodimg/maintenanceimg/502.png" mode="aspectFit"></image>
                    <text class="title">美孚/Mobil</text>
                  </view>
                </view>
              </view>
              <view class="classify-box">
                <view class="classify-title"><text>机油类别</text></view>
                <view class="classify-list-two">
                  <view class="cell">
                    <text class="title">全合成</text>
                  </view>
                  <view class="cell">
                    <text class="title">半合成</text>
                  </view>
                  <view class="cell">
                    <text class="title">矿物油</text>
                  </view>
                </view>
              </view>
              <view class="classify-box">
                <view class="classify-title"><text>机油类别</text></view>
                <view class="classify-list-two">
                  <view class="cell">
                    <text class="title">0W-40W</text>
                  </view>
                  <view class="cell">
                    <text class="title">5W-40W</text>
                  </view>
                  <view class="cell">
                    <text class="title">0W-30W</text>
                  </view>
                  <view class="cell">
                    <text class="title">5W-30W</text>
                  </view>
                  <view class="cell">
                    <text class="title">0W-20W</text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="btn-box">
            <view class="btn">
              <text>重置</text>
            </view>
            <view class="btn confrim" @click="show = false">
              <text>确定</text>
              <text class="font-24">（56件商品）</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      result: {
        PageIndex: 1,
        PageSize: 20,
        isEnd: false,
        loading: false,
        status: 'loading',
        data: []
      },
      configurationId: '',
      maintenanceTypeId: '',
      carId: '',
      pid: '',
      errorImg: 'https://files.yzsheng.com/client/index/carMaintenance/default.png'
    }
  },
  onLoad(option) {
    this.configurationId = option.id || ''
    this.maintenanceTypeId = option.maintenanceTypeId || ''
    this.carId = option.carId || ''
    this.pid = option.pid || ''
    this.getList()
  },
  methods: {
    // 计算总共有多少页
    pageCount (totalnum,limit){
      return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0
    },
    async getList() {
      let res = this.result
      if (res.loading || res.isEnd) {
        return false;
      }
      res.loading = true;
      this.result = res
      
      try{
        let resData = await this.$api.maintenanceIndex.GetAllMaintenanceGoodsByTypeId({
          pageIndex: res.PageIndex,
          pageSize: res.PageSize,
          configuration_Id: Number(this.carId),
          maintenance_Type_Id: this.maintenanceTypeId
        })
        let visitlist = resData.data.list
        // 如果返回数据列表为空，或者当前页数大于总页数代表已经到最后一页了
        if(visitlist.length <= 0 || res.PageIndex >= this.pageCount(resData.data.total, res.PageSize)) {
          res.isEnd = true
          res.status = 'nomore'
        }
        
        if (visitlist.length > 0) {
          res.data = res.data.concat(visitlist)
          res.PageIndex = res.PageIndex + 1
        }
        res.loading = false
        this.result = res
      }catch(e){
        //TODO handle the exception
      }
    },
    // 点击替换
    async onClickReplace(data) {
      try{
        uni.showLoading({
          title: '加载中'
        })
        let res = await this.$api.maintenanceIndex.GetSelectedMaintenanceGoods({
          configuration_Id: this.carId,
          maintenance_Type_Id: data.maintenance_Type_Id,
          maintenance_Goods_Id: data.id
        })
        uni.hideLoading()
        if(res.code === 200){
          uni.$emit('maintenanceReplaceProduct', {
            id: this.configurationId,
            maintenance_Type_Id: data.maintenance_Type_Id,
            pid: this.pid,
            data: res.data
          })
          uni.navigateBack({
            delta: 1
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      }catch(e){
        uni.hideLoading()
        //TODO handle the exception
      }
    }
  },
  onReachBottom() {
    this.getList()
  }
}
</script>

<style lang="scss">
.container{
  .screen-box{
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 32rpx;
    .text{
      font-size: 28rpx;
      color: #333;
      margin-right: 10rpx;
    }
  }
  .condition{
    display: flex;
    flex-direction: row;
    padding: 24rpx;
    align-items: center;
    background-color: #f6f6f6;
    .btn-reset{
      color: #999;
      height: 50rpx;
      margin-left: 24rpx;
      display: flex;
      align-items: center;
      .iconfont{
        font-size: 28rpx;
      }
      .text{
        font-size: 26rpx;
        margin-left: 10rpx;
      }
    }
    .condition-list{
      flex: 1;
      overflow: hidden;
      height: 50rpx;
      border-right: 2rpx solid #DBDBDB;
      .scroll-view{
        white-space: nowrap;
        ::-webkit-scrollbar {
        	display: none;  
        	width: 0 !important;  
        	height: 0 !important;
        	-webkit-appearance: none;
        	background: transparent;  
        }
      }
      .condition-item{
        display: inline-block;
        background-color: #ddd;
        border-radius: 10rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        height: 50rpx;
        line-height: 50rpx;
        color: #333;
        margin-right: 20rpx;
        .iconfont{
          font-size: 26rpx;
          margin-left: 14rpx;
        }
      }
    }
  }
  .product-list{
    .cell{
      display: flex;
      padding: 38rpx 32rpx 0;
      .img{
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
      }
      .info{
        flex: 1;
        margin-left: 25rpx;
        .title{
          font-size: 26rpx;
          color: #333;
          line-height: 40rpx;
        }
        .tags{
          display: flex;
          align-items: center;
          margin-top: 8rpx;
          .text{
            font-size: 20rpx;
            color: #799CF2;
            border: 1px solid #799CF2;
            border-radius: 5rpx;
            margin-right: 12rpx;
            padding: 0 6rpx;
          }
          .text:first-child{
            color: #EF9A3F;
            border: 1px solid #EF9A3F;
          }
        }
        .bottom-box{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;
          .left{
            display: flex;
            align-items: center;
            .price{
              font-size: 24rpx;
              color: #FF6F6A;
              .strong{
                font-size: 32rpx;
                font-weight: bold;
              }
            }
            .num{
              font-size: 26rpx;
              color: #666;
              margin-left: 14rpx;
            }
          }
          .right{
            font-size: 26rpx;
            color: #799CF2;
          }
        }
      }
    }
  }
  .popup-content{
    width: 660rpx;
    height: 100%;
    overflow: hidden;
    .content{
      padding-top: calc(var(--status-bar-height) + 44px);
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .list{
      flex: 1;
      padding-left: 40rpx;
      overflow: hidden;
      .scroll-view{
        height: 100%;
      }
      .classify-box{
        margin-top: 80rpx;
        .classify-title{
          font-size: 32rpx;
          color: #000;
          font-weight: bold;
        }
        .classify-list-one{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin-top: 10rpx;
          .cell{
            width: 200rpx;
            height: 180rpx;
            border-radius: 10rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .logo{
              width: 90rpx;
              height: 90rpx;
            }
            .title{
              font-size: 26rpx;
              color: #000;
              margin-top: 14rpx;
            }
            &.active{
              border: 2rpx solid #FBB000;
            }
          }
        }
        .classify-list-two{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .cell{
            width: 170rpx;
            height: 60rpx;
            background-color: #eee;
            border-radius: 10rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            color: #666;
            margin-right: 38rpx;
            margin-top: 36rpx;
            &.active{
              background-color: #FBD220;
              color: #333;
            }
          }
        }
      }
      .classify-box:first-child{
        margin-top: 0;
      }
    }
    .btn-box{
      padding: 45rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn{
        width: 270rpx;
        height: 88rpx;
        border: 2rpx solid #ddd;
        border-radius: 44rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: #333;
      }
      .confrim{
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border: none;
      }
    }
  }
  
  .loading-status{
    padding: 40rpx 0;
  }
}
</style>
